import { useRoutes, Link, useMatch, useNavigate } from "react-router-dom"
import routes from "../router"
// react路由支持声明式,只需要通过Route就能配置出路由了

//routes只能嵌套route

//Link是导航组件 用于跳转路由 必须传递属性 to

//useRoute能够将路由配置转换成路由组件


//useMatch可以往函数中传递一个路径,可以判断是否有组件匹配成功



let Basic2 = () => {
    let element = useRoutes(routes)
    let match = useMatch("/mine")
    console.log('----match', match)

    //使用编程式

    let navigate = useNavigate()

    let handleNormal = () => {
        //当成Push来使用
        // navigate("/friend/123")
        //传递query
        // navigate("/discover/toplist?name=韩梅梅")
        //传递state,刷新页面也不会丢失state
        // navigate("/discover/playlist", { state: { name: '张碧晨' } })
    }

    let handleClick = () => {
        //当成replace来使用
        navigate("/discover", {
            replace: true
        })
    }
    return (
        <fieldset>
            <legend>Basic2</legend>
            <h1>Basic2</h1>
            <Link to="/friend/123">朋友</Link>
            <br />
            <Link to="/discover">发现</Link>
            <br />
            <Link to="/mine">个人中心</Link>
            {element}
            <button onClick={handleNormal}>一个朴实无华的按钮</button>
            <button onClick={handleClick}>一个风情万种的按钮</button>
        </fieldset>
    )
}

export default Basic2